<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="./css/bootstrap.min.css">
    <link rel="stylesheet" href="./index.css">
    <style>
        .m2 {
            font-size: 12px;
            color: white;
            background-color: red;
            border-radius: 4px;
        }
    </style>
</head>

<body>
    <nav class="nav navbar-inverse navbar-fixed-top nav1">
        <div class="container ">
            <div class="navbar-header">
                <button class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                </button>
                <img src="./image/footer_logo.png" alt="">
                <span class="m3 ">
                    <a href="javascript:;" style="color: #9d9d9d;" data-toggle="modal" data-target="#login">登录</a>
                    <a href="" style="color: #9d9d9d;">注册</a>
                </span>
            </div>
            <div class="collapse navbar-collapse navbar-left ">
                <ul class="nav navbar-nav">
                    <li><a href="">全国</a></li>
                    <li class=" dropdown">
                        <a href="" id="dropdownMenu1" data-toggle="dropdown">演出<span class="caret"></span></a>
                        <ul class="dropdown-menu" aria-labelledby="dropdownMenu1">
                            <li class="active"><a href="javascript:;">演出票</a></li>
                            <li><a href="javascript:;">场馆</a></li>
                        </ul>
                    </li>
                    <li><a href="">电影</a></li>
                    <li><a href="">我的微票<span class="m2">new</span></a></li>
                </ul>
            </div>
            <div class="m1">
                <ul class="nav navbar-nav navbar-right">
                    <li><a href="javascript:;" data-toggle="modal" data-target="#login">登录</a></li>
                    <li><a href="javascript:;">注册</a></li>
                </ul>
                <form action="" class="navbar-form navbar-right">
                    <div class="form-group">
                        <input type="text" class="form-control" placeholder="请输入要搜索的内容">
                        <button type="submit" class="btn btn-default">搜索</button>
                    </div>
                </form>
            </div>
        </div>
    </nav>

    <div id="login" class="modal fade" data-backdrop="static">
        <div class="modal-dialog modal-lg">
            <div class="modal-content">

                <div class="modal-header">
                    <button class="close" data-dismiss="modal">&times;</button>
                    <img src="./image/f_wpr_h.png" alt="">
                    <p class="modal-title">微信电影演出票官网</p>
                </div>
                <div class="modal-body">
                    <form action="" class="form-group">
                        <input type="text" class="form-control" placeholder="手机/邮箱/用户名">
                        <input type="text" class="form-control" placeholder="密码" style="margin: 20px 0px;">
                        <input type="checkbox" style="margin-bottom: 20px;"><span>下次自动登录</span>
                        <input type="submit" class="form-control btn btn-primary" value="登录">
                    </form>
                </div>
                <div class="modal-footer">
                    <h1>ps:这是pc的登录页面</h1>
                </div>

            </div>
        </div>
    </div>

    <div class="mb container">
        <div id="lb" class="carousel slide lb1" data-ride="carousel">
            <div class="carousel-inner">
                <div class="item active">
                    <img src="./image/1.jpg">
                </div>
                <div class="item">
                    <img src="./image/2.jpg">
                </div>
                <div class="item">
                    <img src="./image/3.jpg">
                </div>
                <div class="item">
                    <img src="./image/4.jpg">
                </div>
            </div>
            <!-- 小圆点 -->
            <ol class="carousel-indicators">
                <li data-target="#lb" data-slide-to="0" class="active"></li>
                <li data-target="#lb" data-slide-to="1"></li>
                <li data-target="#lb" data-slide-to="2"></li>
                <li data-target="#lb" data-slide-to="3"></li>
            </ol>
        </div>
        <div class="c_rig">
            <h2>特惠看</h2>
            <img src="./image/img1.jpg">
            <p>[苏州]2016迷笛电子音乐节(预售)</p>
            <p>穿着花裤子喝着小酒通宵达旦</p>
            <p style="border-bottom: 1px dashed #ccc;">2016刘若英世界巡回演唱会</p>
            <p>[上海]百老汇经典音乐剧--《狮子王》</p>
        </div>
    </div>
    <div class="container" style="margin-top:20px ;">
        <div class="row">
            <div class="col-md-2 col-xs-6">
                <div class="thumbnail">
                    <img src="./image/5.jpg">
                    <div class="caption">
                        <p>[上海]百老汇经典音乐剧《狮子王》</p>
                    </div>
                </div>
            </div>
            <div class="col-md-2 col-xs-6">
                <div class="thumbnail">
                    <img src="./image/6.jpg">
                    <div class="caption">
                        <p>[北京]陈奕迅 ANOTHER EASON'S LIFE演唱会北京站</p>
                    </div>
                </div>
            </div>
            <div class="col-md-2 col-xs-6">
                <div class="thumbnail">
                    <img src="./image/7.jpg">
                    <div class="caption">
                        <p>[深圳]逃跑计划2016巡回演唱会深圳站</p>
                    </div>
                </div>
            </div>
            <div class="col-md-2 col-xs-6">
                <div class="thumbnail">
                    <img src="./image/8.jpg">
                    <div class="caption">
                        <p>[北京]BJCC北京漫控潮流博览会</p>
                    </div>
                </div>
            </div>
            <div class="col-md-4 col-xs-12 thumbnail ">
                <ul class="nav nav-tabs">
                    <li class="active"><a href="#name1" data-toggle="tab">首页</a></li>
                    <li><a href="#name2" data-toggle="tab">技能课</a></li>
                </ul>
                <div class="tab-content text-center" style="padding: 10px;">
                    <div class="tab-pane active fade in" id="name1">
                        <img src="./image/img2.jpg">
                        <p style="border-bottom: 1px  dashed #ccc;padding: 10px 0px;">[哈尔滨]梁静茹.你的名字是爱情演唱会</p>
                        <p>[太原]蔡依林2016PLAY世界巡回演唱会</p>
                    </div>
                    <div class="tab-pane fade" id="name2">
                        <img src="./image/img3.jpg">
                        <p>[哈尔滨]梁静茹.你的名字是爱情演唱会</p>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div class="container" style="margin-bottom: 20px ;">
        <img src="./image/ad1.jpg" width="100%">
    </div>
    <div class="container">
        <div class="col-md-9">
            <ul class="nav nav-tabs">
                <li class="active"><a href="#name3" data-toggle="tab">演唱会</a></li>
                <li><a href="#name4" data-toggle="tab">体育赛事</a></li>
                <li><a href="#name5" data-toggle="tab">舞台剧</a></li>
                <li><a href="#name6" data-toggle="tab">儿童亲子</a></li>
                <li><a href="#name7" data-toggle="tab">音乐会</a></li>
                <li><a href="#name8" data-toggle="tab">展览活动</a></li>
            </ul>
            <!-- 选项卡面板 -->
            <div class="tab-content" style="padding-top: 10px;">
                <div class="tab-pane active fade in" id="name1">
                    <div class="row">
                        <div class="col-md-3 col-xs-6">
                            <div class="thumbnail">
                                <img src="./image/9.jpg">
                                <div class="caption">
                                    <p>[苏州]2016迷笛电子音乐节</p>
                                    <p><span style="font-size: 30px;color:#2ED2C1;">180</span>元起</p>
                                </div>
                            </div>
                        </div>
                        <div class="col-md-3 col-xs-6">
                            <div class="thumbnail">
                                <img src="./image/10.jpg">
                                <div class="caption">
                                    <p>[深圳]逃跑计划2016巡回演唱会深圳站</p>
                                    <p><span style="font-size: 30px;color:#2ED2C1;">180</span>元起</p>
                                </div>
                            </div>
                        </div>
                        <div class="col-md-3 col-xs-6">
                            <div class="thumbnail">
                                <img src="./image/11.jpg">
                                <div class="caption">
                                    <<p>[苏州]2016迷笛电子音乐节</p>
                                        <p><span style="font-size: 30px;color:#2ED2C1;">380</span>元起</p>
                                </div>
                            </div>
                        </div>
                        <div class="col-md-3 col-xs-6">
                            <div class="thumbnail">
                                <img src="./image/12.jpg">
                                <div class="caption">
                                    <p>[青岛]周杰伦2016世界巡回演唱会青岛站(即将开售)</p>
                                    <p><span style="font-size: 30px;color:#2ED2C1;">380</span>元起</p>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="row">
                        <div class="col-md-3 col-xs-6">
                            <div class="thumbnail">
                                <img src="./image/13.jpg">
                                <div class="caption">
                                    <p>[太原]周杰伦2016世界巡回演唱会太原站(预售) 280元起</p>
                                    <p><span style="font-size: 30px;color:#2ED2C1;">280</span>元起</p>
                                </div>
                            </div>
                        </div>
                        <div class="col-md-3 col-xs-6">
                            <div class="thumbnail">
                                <img src="./image/14.jpg">
                                <div class="caption">
                                    <p>[太原]2016 李荣浩「有 理想」世界巡回演唱会-太原站</p>
                                    <p><span style="font-size: 30px;color:#2ED2C1;">280</span>元起</p>
                                </div>
                            </div>
                        </div>
                        <div class="col-md-3 col-xs-6">
                            <div class="thumbnail">
                                <img src="./image/15.jpg">
                                <div class="caption">
                                    <p>[深圳]徐佳莹“日全蚀”深圳演唱会</p>
                                    <p><span style="font-size: 30px;color:#2ED2C1;">280</span>元起</p>
                                </div>
                            </div>
                        </div>
                        <div class="col-md-3 col-xs-6">
                            <div class="thumbnail">
                                <img src="./image/16.jpg">
                                <div class="caption">
                                    <p>[太原]2016刘若英"Renext 我敢"世界巡回演唱会太原站</p>
                                    <p><span style="font-size: 30px;color:#2ED2C1;">380</span>元起</p>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="col-md-3">
            <p style="background-color: #2ed2ce;color:white;padding:13px 2px;font-size: 14px;"><span
                    style="font-size: 22px;">历历在目-</span>尽享每天不一样的精彩
            </p>
            <p style="font-size: 18px;">今天共 <span style="color:#2ED2C1;">9</span> 场演出</p>
            <div style="display: flex;padding-bottom: 30px;margin-top:10px;border-bottom: 1px solid #ccc;">
                <img src="./image/img4.jpg">
                <div style="padding-left:10px;">
                    <p>[天津]天津中华曲苑相声专场</p>
                    <p>2016年1月1日~12月31日 天津中华曲苑</p>
                    <p><span style="color: #2ED2C1;font-size:16px;">50 </span> 元起</p>
                </div>
            </div>
            <div style="display: flex;padding-bottom: 30px;margin-top:10px;border-bottom: 1px solid #ccc;">
                <img src="./image/img5.jpg">
                <div style="padding-left:10px;">
                    <p>[深圳]刘老根大舞台深圳站</p>
                    <p>2016年3月18日~5月31日 深圳刘老根大舞台</p>
                    <p><span style="color: #2ED2C1;font-size:16px;">120 </span> 元起</p>
                </div>
            </div>
            <div style="display: flex;padding-bottom: 30px;margin-top:10px;border-bottom: 1px solid #ccc;">
                <img src="./image/img6.gif">
                <div style="padding-left:10px;">
                    <p>[长沙]大兵笑工场相声晚会</p>
                    <p>2016年4月18日~6月27日 湘江剧院</p>
                    <p><span style="color: #2ED2C1;font-size:16px;">40 </span> 元起</p>
                </div>
            </div>
            <div style="display: flex;padding-bottom: 30px;margin-top:10px;border-bottom: 1px solid #ccc;">
                <img src="./image/img4.jpg">
                <div style="padding-left:10px;">
                    <p>[天津]天津中华曲苑相声专场</p>
                    <p>2016年1月1日~12月31日 天津中华曲苑</p>
                    <p><span style="color: #2ED2C1;font-size:16px;">50 </span> 元起</p>
                </div>
            </div>
            <p style="margin-top: 10px;"><a href="" style="color:#2ED2C1;">查看今日全部演出</a></p>
        </div>
    </div>
    <div class="container">
        <div class="col-md-9">
            <p><span style="font-size: 24px;">场馆推荐</span><a href="" style="color:#2ED2C1;" class="qbcg">全部场馆</a></p>
            <div class="row">
                <div class="col-md-6 col-xs-12">
                    <div class="thumbnail">
                        <img src="./image/img7.jpg">
                        <div class="caption">
                            <h3>近期演出:</h3>
                            <p>[北京]恒源祥戏剧出品大型原创音乐剧《犹太人在上海》</p>
                            <p>[北京]沪语话剧《永远的尹雪艳》</p>
                            <p>[北京]恒源祥戏剧出品原创话剧《大商海》</p>
                            <p>[北京]百老汇经典音乐剧《音乐之声》中文版</p>
                        </div>
                    </div>
                </div>
                <div class="col-md-6 col-xs-12">
                    <div class="thumbnail">
                        <img src="./image/img8.jpg">
                        <div class="caption">
                            <h3>近期演出:</h3>
                            <p>[北京]2016如果 田馥甄巡回演唱会PLUS北京站(售罄)</p>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="col-md-3 col-xs-12">
            <div class="qwer qq">
                <p style="font-size: 20px;padding-top: 20px;padding-bottom: 10px;border-bottom: 1px solid #ccc;">热销榜单
                </p>
                <div style="display: flex;padding: 10px 0px;border-bottom: 1px solid #ccc;margin-bottom: 10px;">
                    <img src="./image/img9.jpg">
                    <div class="qwer">
                        <p>[上海]百老汇经典音乐剧《狮子王》</p>
                        <p>2016年1月1日~12月31日 [华特迪士尼大剧院]</p>
                        <p><span style="color:#2ED2C1;">190</span> 元起</p>
                    </div>
                </div>
                <p style="border-bottom: 1px dashed #ccc;">[北京]陈奕迅 ANOTHER EASON'S LIFE</p>
                <p style="border-bottom: 1px dashed #ccc;">[深圳]逃跑计划2016巡回演唱会深圳站</p>
                <p style="border-bottom: 1px dashed #ccc;">[北京]BJCC北京漫控潮流博览会</p>
                <p style="border-bottom: 1px dashed #ccc;">[贵阳]陈奕迅 ANOTHER EASON'S LIFE演唱会贵阳站</p>
                <p style="border-bottom: 1px dashed #ccc;">[太原]2016岳云鹏相声专场太原站</p>
            </div>
        </div>
    </div>
    <div class="nav nnn" style="background-color: #252525;">
        <div class="container" style="padding-top: 30px;">
            <div class="col-md-4" style="display: flex; justify-content: space-between;">
                <img src="./image/footer_logo.png" style="width: 148px;">
                <div class="qaz">
                    <p style="color: #666;font-size: 18px;">微信电影票官网</p>
                    <p style="color: #666;font-size: 10px;">在线占好座，覆盖影院全国第一</p>
                </div>
            </div>
            <div class="col-md-4" style="display: flex;justify-content: space-between;">
                <img src="./image/phoneIcon.png" style="width: 44px;height: 39px;">
                <div class=" qaz">
                    <p style="color: #666;font-size: 18px;">微信电影票官网</p>
                    <p style="color: #666;font-size: 10px;">在线占好座，覆盖影院全国第一</p>
                </div>
            </div>
            <div class="col-md-4" style="display: flex;justify-content: space-between;">
                <img src="./image/f_wx.png" style="width: 44px;height: 44px;">
                <img src="./image/f_wpr.png" style="width: 44px;height: 44px;">
                <div class=" qaz">
                    <p style="color: #666;font-size: 18px;">微信电影票官网</p>
                    <p style="color: #666;font-size: 10px;">在线占好座，覆盖影院全国第一</p>
                </div>
            </div>
        </div>
        <div class="col-xs-12">
            <p style="color: #666; margin-top:20px;" class="text-center">@2015北京微影时代科技有限公司版权所有　　京ICP备14034406号-2</p>
        </div>
    </div>

</body>

</html>
<script src="./js/jquery.js"></script>
<script src="./js/bootstrap.min.js"></script>